// 设置页面
import React, { PureComponent } from 'react';
// 引入scss
import './css/falsewall.scss';
import { SkinTwoTone, IdcardTwoTone, EditTwoTone } from '@ant-design/icons';
import { message, Modal, Input, Button } from 'antd'
import cookie from 'react-cookies';
// 引入地址
import { webSite } from '../website.js';
// 引入axios
import Axios from 'axios';
import { NavLink } from 'react-router-dom'
// 引入仓库
import store from '../store/index';
// 引入动作
import { ApiuserId, ApiuserQq } from '../store/actionCreators/ApiCreators';
// 多行文本输入框
const { TextArea } = Input;
export default class FalseWall extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 更换背景图的弹窗
      visible: false,
      // 背景图的input值
      input: '',
      // 更换个性签名的弹窗
      visibleWord: false,
      // 更换个性签名的值
      textAreaWord: ''
    }
    // state的写法
    this.unSubscribe = store.subscribe(() => {
      // 强制更新
      this.forceUpdate()
    })
  }
  // 清除订阅者
  componentWillUnmount () {
    this.unSubscribe()
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  // 网页加载判断没有登录返回主页
  componentDidMount () {
    let { userId } = store.getState().reducer;
    if (!userId) {
      // 用户直接通过网址进入就跳转至主页
      this.props.history.replace('/');
      return;
    }
  }
  OnInputBackFalse = () => {
    let { userId } = store.getState().reducer;
    if (userId) {
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/setBackgroundfalse", { id: userId }).then(err => {
        if (err.data.code === 'L0005') {
          message.success({ content: '还原成功', className: 'bulletChatMessage' })
          // 更新完成关闭背景图
          this.setState({
            visible: false
          })
        }
      }).catch(() => {
        message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
      })
    }
  }
  // 上传网络图片
  OnInputBack = () => {
    let { userId } = store.getState().reducer;
    let input = this.state.input.replace(/\s+/g, "");
    if (input === '') {
      message.info({ content: '请输入图片地址', className: 'bulletChatMessage' });
      return;
    }
    if (userId) {
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/setBackground", { id: userId, background: input }).then(err => {
        if (err.data.code === 'L0004') {
          message.success({ content: '背景图更新完毕', className: 'bulletChatMessage' })
          // 更新完成关闭背景图
          this.setState({
            visible: false
          })
        }
      }).catch(() => {
        message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
      })
    }
  }
  // 关闭弹窗
  handleCancel = () => {
    this.setState({
      // 关闭更换背景的
      visible: false,
      // 关闭更换个性签名的
      visibleWord: false
    });
  };
  // 退出登录的函数
  backHome = () => {
    // 清空仓库的值
    store.dispatch(ApiuserId(''));
    store.dispatch(ApiuserQq(''));
    // 清除所有的sessionStorage
    sessionStorage.clear();
    // 清除用户的cookie数据
    cookie.remove('user')
    cookie.remove('userid')
    message.success({ content: '已退出登录', className: 'bulletChatMessage' });
    // 切换到主页
    window.location.href = '/'
  }

  // 设置背景图的函数
  falseWall_background = () => {
    this.setState({
      visible: true,
    })
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  // 设置个性签名的api
  falseWall_Edit = () => {
    this.setState({
      visibleWord: true,
    })
  }
  // 设置个性签名
  fromOpinion = () => {
    let { userId } = store.getState().reducer;
    let textAreaWord = this.state.textAreaWord.replace(/\s+/g, "");
    if (textAreaWord === '') {
      message.info({ content: '请输入个性签名', className: 'bulletChatMessage' });
      return;
    }
    if (userId) {
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/setWordWall", { id: userId, word: textAreaWord }).then(err => {
        if (err.data.code === 'F0001') {
          message.success({ content: '签名设置成功', className: 'bulletChatMessage' })
          this.setState({
            visibleWord: false,
            // 清空输入框
            textAreaWord: ''
          })
        }
      }).catch(() => {
        message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
      })
    }
  }
  render () {
    let { userQq, userId } = store.getState().reducer;
    let qq = userQq ? `http://q1.qlogo.cn/g?b=qq&nk=${userQq}&s=640` : 'http://q1.qlogo.cn/g?b=qq&nk=123465789&s=640'
    return (
      <div className='falseWall'>
        <div className='falseWall_top'>
          <img src={qq} alt="头像" className='falseWall_img' />
        </div>
        {/* 展示内容 */}
        <ul className='falseWall_ul'>
          <li className='falseWall_li'>
            <div className='falseWall_li_icon'>
              <IdcardTwoTone className='ScheduleTwoTone' />
            </div>
            <div className='falseWall_li_body'>
              <h2>用户id：{userId}</h2>
              <span>用户的唯一通行证</span>
            </div>
          </li>
          {/* 自定义个性签名 */}
          <Modal
            visible={this.state.visibleWord}
            onCancel={this.handleCancel}
            centered={true}
            footer={null}
            className='falseWall_Word'
          >
            {/* 输入框 */}
            <TextArea rows={5} style={{ marginBottom: '5px', resize: 'none' }} placeholder='设置您的个性签名' value={this.state.textAreaWord} name='textAreaWord' onChange={this.handleInput} maxLength='100' />
            {/* 确认提交按钮 */}
            <Button className='WallBtnModal' style={{ width: '40%' }} block type="primary" onClick={this.fromOpinion}>提交</Button>
          </Modal>
          <li className='falseWall_li' onClick={this.falseWall_Edit}>
            <div className='falseWall_li_icon'>
              <EditTwoTone className='ScheduleTwoTone' />
            </div>
            <div className='falseWall_li_body'>
              <h2>设置我的个性签名</h2>
              <span>自定义个性签名</span>
            </div>
          </li>
          {/* 自定义背景图 */}
          <Modal
            visible={this.state.visible}
            onCancel={this.handleCancel}
            centered={true}
            footer={null}
            className='falseWall_ScheduleTwoTone'
          >
            <span style={{ color: '#ccc', fontSize: '12px' }}>仅支持网络地址</span>
            <div><span style={{ color: '#ccc', fontSize: '12px' }}>上传本地图片：</span>
              <NavLink to='/Life/Upload' style={{ display: 'block' }}>点击前往</NavLink>
            </div>
            <Input placeholder="输入图片的网络地址" className='wallInput' value={this.state.input} name='input' onChange={this.handleInput} autoComplete="off" style={{ marginTop: "10px" }} />
            <Button onClick={this.OnInputBack}>更换背景</Button>
            <Button onClick={this.OnInputBackFalse} type="primary">还原背景</Button>
          </Modal>
          <li className='falseWall_li' onClick={this.falseWall_background}>
            <div className='falseWall_li_icon'>
              <SkinTwoTone className='ScheduleTwoTone' />
            </div>
            <div className='falseWall_li_body'>
              <h2>更换主页背景皮肤</h2>
              <span>自定义背景图</span>
            </div>
          </li>
          <li className='falseWall_li falseWall_li_back' onClick={this.backHome}>
            退出登录
          </li>
        </ul>
      </div>
    )
  }
}